<template>
  <div class="home">
    <Menu />
    <h2>Vuecli4 力向导图示例</h2>
    <div>
      <input type="text" v-model="name" />
      <input type="button" @click="getRelationData()" value="搜索" />
      <div>默认搜索：{{name}}</div>
    </div>
    <ForceDirected id="mytest" width="1200" height="700" :nodes="nodes" :edges="edges"></ForceDirected>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Menu from "@/components/Menu.vue";
import ForceDirected from "@/components/Force-Directed.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
    Menu,
    ForceDirected,
  },
  data() {
    return {
      name: "安倍晋三",
      // 节点集
      nodes:[
          {name: "安倍晋三"},
          {name: " 日本 東京都新宿区"}          
      ],
      // 边集
      edges: [
          {source:0,target:1,relation:"出生地",value:2.5}
      ],
      refresh: +new Date()
    };
  },
  async mounted() {
		await this.setData();
	},
  methods: {
    async getRelationData() {     
        await this.setData();
    },
    async setData() {
      var data = await this.$http.post(
        "relationSpectrum/getrelationbyname",
        this.name
      );            
      var nodes = []      
      var edges = []      
      //加载节点数据
      data.data.forEach(function(currentValue,index,arr) {
          var node = {}
          node.name=currentValue.name
          nodes.push(node)
      });     
      // //加载关系数据
      data.data.forEach(function(currentValue,index,arr) {
        var edge = {}       
        if(index == 0){
          //如果是第一个节点则去掉
          return
        }
        edge.source = 0   //所有与主节点的关系均为0
        edge.target = index
        edge.relation = currentValue.relation
        edge.value = 2.5       
        edges.push(edge)
      });
      this.nodes = nodes
      this.edges = edges
      
    },
  },
};
</script>
